<template>
  <FormView not-form form-width="100%">
    <div class="charts-page">
      <ElRow :gutter="12" class="grid">
        <ElCol
          v-for="(option, index) in options"
          :key="index"
          :lg="{ span: 8 }"
          :md="{ span: 8 }"
          :sm="{ span: 12 }"
          :xg="{ span: 8 }"
          :xs="{ span: 8 }"
          class="chart-card-wrapper">
          <ElCard shadow="hover">
            <ECharts :options="option" auto-resize />
          </ElCard>
        </ElCol>
      </ElRow>
    </div>
  </FormView>
</template>

<script>
  import * as echarts from 'echarts/core'
  // 引入柱状图图表，图表后缀都为 Chart
  import {
    BarChart,
    EffectScatterChart,
    LineChart,
    MapChart,
    PictorialBarChart,
    PieChart,
    RadarChart,
    ScatterChart
  } from 'echarts/charts'
  // 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
  import {
    DatasetComponent,
    GridComponent,
    LegendComponent,
    PolarComponent,
    TitleComponent,
    TooltipComponent
  } from 'echarts/components'
  // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
  import { SVGRenderer } from 'echarts/renderers'

  import polar from './data/polar'
  import pie from './data/pie'
  import mix1 from './data/mix'
  import getBar from './data/bar'

  import { line1, line2, line3, line33, line4, line5, line6, line7 } from '@/views/playground/echarts/data/line'
  import { grid } from '@/views/playground/echarts/data/grid'

  // 注册必须的组件
  echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    DatasetComponent,
    PolarComponent,
    SVGRenderer,
    BarChart,
    LineChart,
    PieChart,
    RadarChart,
    MapChart,
    ScatterChart,
    EffectScatterChart,
    PictorialBarChart
  ])

  const bar = getBar()

  export default {
    name: 'EChartsDemo',
    data() {
      return {
        options: []
      }
    },
    async mounted() {
      setTimeout(() => {
        this.options = Object.freeze([
          line1,
          line2,
          bar,
          pie,
          polar,
          grid,
          line33,
          line3,
          line4,
          line5,
          line6,
          line7,
          mix1
        ])
      })
    }
  }
</script>

<style lang="scss">
  .charts-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 10px 10px;

    .grid .el-card__body {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 300px;
      padding: 10px;
    }

    .card-label {
      height: 22px;
      overflow: hidden;
      font-size: 0.8em;
      line-height: 22px;
      text-align: center;
    }

    .chart-card-wrapper {
      margin-top: 10px;
      cursor: pointer;
    }
  }
</style>
